<template>
  <div :class="{ subPage: true, ipxPage: ifIphonex }">
    <div v-if="!isComponent">
        <nav-bar
        :title="navTitle"
        position="center"
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)'
        :rowColor="'white'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="topBox" v-if="!isComponent">
      <div class="magnifierBox" v-if="pageType == 1 || pageType == 0 || online_visits == 0">
        <img :src="magnifierIcon" />
        <div class="iptBox">
          <input
            placeholder="请输入您要查找的科室/医生"
            v-model="serchVale"
            maxlength="10"
            class="ipt"
            @input="serchList"
          />
        </div>
        <!-- <span class="btnCancel" @click="removeIptVla">取消</span> -->
        <span class="cancelBox"  @click="removeIptVla">
          <img class="imgClass" v-if="imgUrl && serchVale" :src="imgUrl + 'dleIcon.png'" />
        </span>
      </div>
      <!-- 专家、专科 选择按钮  隐藏-->
      <div
        class="interrogationBox"
        v-if="(false && pageType == 0 && online_visits == 1 && doctorList.length == 0 && (!serchVale || serchVale == 'null')) "
      >
        <div class="itemLeft" @click="tooDeptDoctor(2)">
          <img :src="itemLeftUrl" />
        </div>
        <div class="itemRight" @click="tooDeptDoctor(1)">
          <img :src="itemRighttUrl" />
        </div>
      </div>
    </div>
    <div v-if="!serchVale"  class="outlineBox" >
      <div class="navTop"  v-if="!isComponent">
        <ul class="topTab">
          <li v-for="item in tabList" :key="item.key" :class="{'nowTab':tab===item.key}" @click="handleChange(item.key)" >
            {{item.title}}
          </li>
          <span :class="['slideSpan',{'chooseTabSpan':tab==='tab2'}]" ></span>
        </ul>
      </div>
      <div :class="['bomBox',{'whiteBg':isComponent}]">
        <div class="leftBox" v-if="!showDoctor">
          <ul>
            <li
              v-for="(item, index) in navDeptList"
              :class="item.className"
              :key="index"
              @click="deptClick(index, item.dept_id)"
            >
              <div class="deptImg">
                <img :src="item.image_url" />
              </div>
              <div class="deptName" :title="item.dept_name">
                {{ item.dept_name }}
              </div>
            </li>
          </ul>
        </div>
        <div class="rightBox" v-if="!showDoctor">
          <ul>
            <li
              v-for="(item, index) in deptList"
              :key="index"
              @click="toDoctorPage(item.dept_id, item.doctor_id, item)"
            >
              <div :title="item.dept_name">{{ item.dept_name }}</div>
            </li>
          </ul>
        </div>
        <div class="rowBox" v-if="showDoctor">
          <ul>
            <li
              v-for="(item, index) in schedulingList"
              :key="index"
              :class="item.className"
              @click="dateClick(index, item.data)"
            >
              <div>{{ item.label }}</div>
              <div>{{ item.value }}</div>
            </li>
          </ul>
          <div class="box" v-if="doctorMsgList.length != 0">
            <!--  -->
            <div
              class="liClass"
              v-for="(item, index) in doctorMsgList"
              :key="index"
              @click="openModal(item)"
            >
              <div class="topBox">
                <div class="doctorImg">
                  <img :src="item.doctor_image_key" />
                </div>
                <div class="doctorMsg">
                  <div class="docTop">
                    <div class="docName" :title="item.doctor_name">
                      {{ item.doctor_name }}
                    </div>
                    <!-- @click="toDoctorDetails(item)" -->
                    <div
                      class="docPosition"
                      :title="item.positional_title + '/' + item.dept_name"
                    >
                      {{ item.positional_title }} / {{ item.dept_name }}
                    </div>
                    <div class="docIntroduce" :title="item.skilled_in">
                      <!--  -->
                      擅长：{{ item.skilled_in }}
                    </div>
                  </div>
                  <div class="docBom">
                    <div class="labClass">剩余{{ item.useful_tick }}</div>
                    <div class="btnClass" @click.stop="openModal(item)">预约挂号</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="nullBox" v-if="doctorMsgList.length == 0 && !delayShowData">
            <div class="searchDefault">
              <img :src="nullUrl" />
              <!-- <div>暂无相关数据</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ruleBox"
      @click="ruleShowBox"
      v-if="!isComponent && (tab=='tab1' && !serchVale && doctorList.length == 0) || (tab == 'tab2' && !serchVale && doctorList.length == 0)"
    >
      <img v-if="imgUrl" :src="imgUrl + 'take_back.png'" />
      {{ ruleName }}
    </div>
    <div class="searchBox" v-if="serchVale">
      <ul>
        <li
          class="serchItem"
          v-if="doctorList.length != 0"
          v-for="(item, index) in doctorList"
          :key="index"
          @click="toDoctorPage(item.dept_id, item.doctor_id, item)"
        >
          <img :src="magnifierIcon" />
          <span v-if="pageType == 1">{{ item.dept_name }}&nbsp;&nbsp;{{ item.doctor_name ? item.doctor_name : '' }}</span>
          <span v-if="pageType == 0">{{ item.doctor_name ? item.doctor_name + '&nbsp;&nbsp;' : '' }}{{ item.dept_name }}</span>
          <img  class="rightImg" v-if="imgUrl && pageType == 0 && item.doctor_name" :src="imgUrl + 'expertIcon.png'" />
        </li>
        <li class="searchDefault" v-if="doctorList.length == 0">
          <div class="searchDefaultBox">
            <img :src="defaultImg" />
            <div>暂无相关数据</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="modalClass" v-if="!isComponent && judgeModalList[tab]" :style="{ display: modalStyle }">
      <div class="modalBox">
        <div class="modalTit">
          <img :src="appointmentBanner" alt="" />
        </div>
        <div class="modalCenter">
          <div class="dataBox">
            <span class="itemSpan">{{ appointmentTitle }}</span>
          </div>
          <div
            class="dataBox"
            v-for="(item, index) in bookingInformationListType"
            :key="index"
          >
            <!-- <span class="itemPie"></span> -->
            <span
              :class="[
                'itemSpan',
                ((index == 1) && online_visits == 0) ||
                (index == 7 && pageType == 0)
                  ? 'itemColor'
                  : '',
              ]"
              >{{ item }}
              </span
            >
          </div>
        </div>
        <!-- <div :class="[modalFooter, 'dialog-footer']" @click="close">
          {{ btnTime }}{{ btnName }}
        </div> -->
        <div class="btnBomBlue">
            <div class="modalFooterBtn leftBtn" @click="returnPage">
              不同意
            </div>
            <div class="modalFooterBtn rightBtn" @click="agree">
              同意
            </div>
        </div>

      </div>
    </div>

    <div class="modalCls" v-if="showModal">
      <div class="modalBox">
        <div class="closeBox" @click="closeModal">
          <img :src="closeImg" />
        </div>
        <div class="modalTit">
          <img :src="doctorUrl" />
        </div>
        <div class="modalCenter">
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan"
              >预约挂号针对<span class="itemSpanRed">复诊患者</span
              >,新患者及复诊超过三个月的患者,请线下医院就诊</span
            >
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan"
              >预约挂号时间为:<span class="itemSpanRed"
                >24小时制</span
              ></span
            >
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan"
              >您与医生的<span class="itemSpanRed">交流时长为8分钟</span
              >,请把握时间</span
            >
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan"
              >三个月的复诊患者<span class="itemSpanRed">如需开药</span
              >,请在下一页面<span class="itemSpanRed"
                >病情描述上传既往处方笺、病历</span
              ></span
            >
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan"
              >开具药品由快递配送,<span class="itemSpanRed"
                >邮费到付</span
              ></span
            >
          </div>
        </div>
        <div class="modalFooter" @click="toDetails(4)">立即申请</div>
      </div>
    </div>
    <div class="ruleModal" v-if="ruleShow">
      <div class="modalBox">
        <div class="modalTit" @click="ruleHidBox">
          <img v-if="imgUrl" :src="imgUrl + 'drop_down.png'" />
          {{ ruleNameTitle }}
        </div>
        <div class="modalCenter">
          <span class="itemSpan" v-html="ruleText"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let app = getApp();
let store = app.store;
import api from "@/api/api";
import { mapState } from "vuex";
//   import nim from '@/utils/nim'
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
//   import Bus from '@/utils/bus.js'
//   const { $Toast, $Message } = require('../../../../../static/iview/base/index')
//   import visitingTips from '@/components/visitingTips.vue'
export default {
  components: {
    navBar
  },
  data() {
    return {
      btnName: "秒后可关闭",
      navTitle: "线上问诊",
      delayShowData: true,
      btnTime: "3",
      serchVale: "",
      value2: true,
      modalFooter: "modalFooter btnDis",
      judgeModalList: {
        tab1: true,
        tab2: true
      },
      showModal: false,
      modalStyle: "felx",
      navDeptList: [],
      deptList: [],
      ruleShow: false,
      imgUrl: "",
      itemLeftUrl: "",
      itemRighttUrl: "",
      descBgUrl: "",
      doctorUrl: "",
      doctorList: [],
      pageType: 0,
      showDoctor: false,
      schedulingList: [{}, {}, {}, {}, {}, {}, {}],
      doctorMsgList: [],
      nullUrl: "",
      doctorInfo: {},
      linkUrl: "",
      magnifierIcon: "",
      defaultImg: "",
      closeImg: "",
      ruleName: "",
      ruleTit1: "",
      ruleTit2: "",
      ruleTit3: "",
      ruleTit4: "",
      ruleTit5: "",
      ruleTit6: "",
      ruleTitList: [],
      online_visits: 1,
      ruleNameTitle: "",
      bookingInformationList: [
        {
          // banner: "https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/",
          banner: "https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/tuwen_yinpin_banner.png",
          title:
            "线上问诊功能包含图文问诊和音频问诊，您可以通过图文或音频的方式与医生进行咨询交流，为确保您的就医体验，请仔细阅读以下须知：",
          detail: [
            "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；",
            "2.请在病情描述界面上传您的既往病历、处方笺、检验、检查结果等相关资料；",
            "3.复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；",
            "4.挂号时间为：挂号时间为24小时制；",
            "5.医生将在24小时内接诊并回复,自医生接诊开始计时。交流时限为24小时,超时系统将自动结束对话。如医生未在24小时内接诊,挂号费自动原路退还。",
          ],
        },
        {
          // banner: "/static/images/video_wenzhen_banner.png",
          banner: "https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/patient/video_wenzhen_banner.png",
          title:
            "您可以通过视频预约挂号的方式与医生视频交流，为确保您的就医体验，请仔细阅读以下须知：",
          detail: [
            "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；",
            "2. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；",
            "3. 就诊时段：上午9:00-11:00，下午15:00-17:00；夜间 18:00—21:00；",
            "4. 专科视频问诊预约挂号规则：当日11:00前可预约当日下午及第二天全天号源（周末及节假日暂停开诊，请注意挂号时间），挂完即止；",
            "5. 专家视频问诊预约挂号规则：专家号源可提前1-7天预约，此号源为灵活时间段（具体以专家自主排班为准），挂完即止；",
            "6. 号源规则：当日同一就诊人/同一时间段内只能预约1个号源；当日同一就诊人/不同时间段最多可以预约3个号源；",
            "7. 候诊规则：预约挂号成功后，请就诊人本人及时前往云诊间排队进行人脸验证，提前做好候诊准备；如需取消预约，请在医生接诊前点击申请退款，后台审核通过后挂号费将原路退回。因就诊人个人原因造成的逾期未就诊号源，系统将自动作废；",
            "8. 如您为三个月内的复诊患者，请在病情描述界面上传您的既往病历、处方笺、检验检查结果等相关资料；",
            "9. 每张处方最多可开具10种药品，且用药剂量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具；",
            "10. 每线上诊疗产生的费用均需线上支付；开具药品支付成功后将在24小时内由第三方快递配送，快递费到付，药品一经售出不予退换。",
          ],
        },
      ],
      applyStatus: false,
      ruleText: "",
      queryDoctorId: null, // 路由传来的doctor_id
      findIndex: 0,
      tab:'tab1',
      tabList: [
        {title: '图文音频', key: 'tab1', count: 0},
        {title: '视频问诊', key: 'tab2', count: 0}
      ],
    };
  },
  props: {
    isComponent: Boolean  // 作为专家预约的组件显示专家排班
  },
  computed: {
    ...mapState(["ifIphonex"]),
    bookingInformationListType() {
      return this.online_visits == 0
        ? this.bookingInformationList[0].detail
        : this.bookingInformationList[1].detail;
    },
    appointmentBanner() {
      return this.online_visits == 0
        ? this.bookingInformationList[0].banner
        : this.bookingInformationList[1].banner;
    },
    appointmentTitle() {
      return this.online_visits == 0
        ? this.bookingInformationList[0].title
        : this.bookingInformationList[1].title;
    },
  },
  mounted() {
    console.log(this.isComponent,'是否为组件')
    if(this.isComponent) this.tooDeptDoctor(1)
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data())
    console.log("pageType2:", this.pageType);
    let that = this;
    this.showModal = false;
    this.imgUrl = api.imgUrl;
    this.descBgUrl = this.imgUrl + "videoTit.png";
    this.doctorUrl = this.imgUrl + "bg_professor_video_desc.png";
    this.itemLeftUrl = this.imgUrl + "bg_img_dept.png";
    this.itemRighttUrl = this.imgUrl + "bg_img_doctor.png";
    // this.nullUrl = this.imgUrl+'noExpert.png',
    this.magnifierIcon = this.imgUrl + "magnifier-icon.png";
    this.defaultImg = this.imgUrl + "default.png";
    this.closeImg = this.imgUrl + "close.png";
    this.ruleName = "视频问诊知情同意书";
    this.ruleTit1 =
      "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；";
    this.ruleTit2 =
      "2. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；";
    this.ruleTit3 =
      "3. 就诊时段：上午9:00-11:00，下午15:00-17:00；夜间 18:00—21:00；";
    this.ruleTit4 = "4. 专科视频问诊预约挂号规则：当日11:00前可预约当日下午及第二天全天号源（周末及节假日暂停开诊，请注意挂号时间），挂完即止；";
    this.ruleTit5 = "5. 专家视频问诊预约挂号规则：专家号源可提前1-7天预约，此号源为灵活时间段（具体以专家自主排班为准），挂完即止；";
    this.ruleTit6 = "6. 号源规则：当日同一就诊人/同一时间段内只能预约1个号源；当日同一就诊人/不同时间段最多可以预约3个号源；";
    this.ruleTit7 = "7. 候诊规则：预约挂号成功后，请就诊人本人及时前往云诊间排队进行人脸验证，提前做好候诊准备；如需取消预约，请在医生接诊前点击申请退款，后台审核通过后挂号费将原路退回。因就诊人个人原因造成的逾期未就诊号源，系统将自动作废；"
    this.ruleTit8 = "8. 如您为三个月内的复诊患者，请在病情描述界面上传您的既往病历、处方笺、检验检查结果等相关资料；"
    this.ruleTit9 = "9. 每张处方最多可开具10种药品，且用药剂量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具。"
    this.ruleTit10 = "10. 线上诊疗产生的费用均需线上支付；开具药品支付成功后将在24小时内由第三方快递配送，快递费到付，药品一经售出不予退换。"
    this.ruleTitList = [];
    this.ruleShow = false;
    if(this.isComponent) return
    if(this.$route.query.video == 0) this.tab = 'tab2'
    this.initPage()
  },
  methods: {
    // 弹框返回
    returnPage () {
      let WxPages = getCurrentPages();
      if (WxPages.length<2) {
        this.$router.replace('/pages/index/main')
      } else {
        this.$router.go(-1)
      }
    },
    initPage() {
      let that = this
      if (this.tab == 'tab2') {
        console.log('执行')
        this.getRules(1);
        this.online_visits = 1;
        // this.pageType = this.$route.query.video;
        this.pageType = this.tab === 'tab1'?1:0
        that.modalStyle = 'flex';
        this.showDoctor = false;
        this.ruleName = "视频问诊知情同意书";
        this.ruleNameTitle = "视频问诊知情同意书";
        this.applyStatus = false;
        this.navTitle = "线上问诊"
        mpvue.setNavigationBarColor({
          frontColor: "#ffffff" /*标题颜色，这里貌似仅支持 #ffffff 和 #000000 */,
          backgroundColor: "#557DF5" /*背景色 十六进制即可*/,
        });
      } else if (this.tab == 'tab1') {
        // 音频图文问诊
        this.getRules(5);
        // this.pageType = this.$route.query.video;
        this.pageType = this.tab === 'tab1'?1:0
        this.online_visits = 0;
        this.ruleName = "图文音频问诊知情同意书";
        this.ruleNameTitle = "图文音频问诊知情同意书";
        // that.modalStyle = "felx";
        that.modalStyle = 'flex';
        this.showDoctor = false;
      } else {
        that.modalStyle = "felx";
        this.showDoctor = false;
      }
      console.log(this.showDoctor);
      that.btnTime = "3";
      that.btnName = "秒后可关闭";
      that.modalFooter = "modalFooter btnDis";
      this.removeIptVla();
      this.countDown();
      if (this.$route.query.specilist == 1 ) { // 预约记录专家门诊跳转
          this.queryDoctorId = this.$route.query.doctor_id
          this.tooDeptDoctor(1)
        } else {
          this.getList();
        }
    },
    // 弹框同意
    agree () {
      this.modalStyle = "none";
      if(this.tab === 'tab1') {
        this.judgeModalList.tab1 = false
      } else {
        this.judgeModalList.tab2 = false
      }
    },
    // 改变tab
    handleChange (value) {
      this.tab = value
      console.log(this.pageType,'在这')
      this.initPage()
    },
    getRules(e) {
      if (e == 0) {
        this.ruleTit1 =
          "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；";
        this.ruleTit2 =
          "2. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；";
        this.ruleTit3 =
          "3. 就诊时段：上午9:00-11:00，下午15:00-17:00，晚上18:00-21:00；";
        this.ruleTit4 = "4. 预约挂号规则：可预约7天内专家号源，此号源为灵活时间段（具体以专家自主排班为准），挂完即止；";
        this.ruleTit5 = "5.当日同一就诊人/同一科室只能预约1个专家号源；当日同一就诊人/不同科室最多可以预约3个专家号源；";
        this.ruleTit6 = "6. 候诊规则：预约挂号成功后，请就诊人本人及时前往云诊间排队进行人脸验证，提前做好候诊准备；如需取消预约，请在医生接诊前点击申请退款，后台审核通过后挂号费将原路退回。因就诊人个人原因造成的逾期未就诊号源，系统将自动作废；";
        this.ruleTit7 = "7. 如您为三个月内的复诊患者，请在病情描述界面上传您的既往病历、处方笺、检验检查结果等相关资料；"
        this.ruleTit8 = "8. 每张处方最多可开具5种药品，且用药剂量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具；"
        this.ruleTit9 = "9. 线上诊疗产生的费用均需线上支付；开具药品支付成功后将在24小时内由第三方快递配送，快递费到付，药品一经售出不予退换。"
        // #FB4141;
        this.ruleText = `<p style="font-size:30rpx;color:#666666;font-weight:400;">${this.ruleTit1}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit2}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit3}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit4}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit5}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit6}</p>
                           <p style="font-size:30rpx;color:#FB4141;font-weight:400;margin-top:20px;">${this.ruleTit7}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit8}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit9}</p>`;

      } else if (e == 1) {
        this.ruleTit1 =
          "1. 就诊人为诊断明确且病情稳定的复诊患者，请确认就诊患者信息，并如实反馈病情，否则一切后果将由就诊人承担；";
        this.ruleTit2 =
          "2. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；";
        this.ruleTit3 =
          "3. 就诊时段：上午9:00-11:00，下午15:00-17:00，晚上18:00-21:00；";
        this.ruleTit4 = "4. 专科视频问诊预约挂号规则：当日11:00前可预约当日下午及第二天全天号源（周末及节假日暂停开诊，请注意挂号时间），挂完即止；";
        this.ruleTit5 = "5. 专家视频问诊预约挂号规则：专家号源可提前1-7天预约，此号源为灵活时间段（具体以专家自主排班为准），挂完即止；";
        this.ruleTit6 = "6. 号源规则：当日同一就诊人/同一时间段内只能预约1个号源；当日同一就诊人/不同时间段最多可以预约3个号源，后台审核通过后挂号费将原路退回。因就诊人个人原因造成的逾期未就诊号源，系统将自动作废；";
        this.ruleTit7 = "7. 候诊规则：预约挂号成功后，请就诊人本人及时前往云诊间排队进行人脸验证，提前做好候诊准备；如需取消预约，请在医生接诊前点击申请退款，后台审核通过后挂号费将原路退回。因就诊人个人原因造成的逾期未就诊号源，系统将自动作废；"
        this.ruleTit8 = "8. 如您为三个月内的复诊患者，请在病情描述界面上传您的既往病历、处方笺、检验检查结果等相关资料；"
        this.ruleTit9 = "9. 每张处方最多可开具10种药品，且用药剂量最多不超过1个月，针剂、毒麻精、草药及其他风险药品不予开具；"
        this.ruleText = `<p style="font-size:30rpx;color:#666666;font-weight:400;">${this.ruleTit1}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit2}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit3}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit4}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit5}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit6}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit7}</p>
                           <p style="font-size:30rpx;color:#FB4141;font-weight:400;margin-top:20px;">${this.ruleTit8}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit9}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">
                           10. 线上诊疗产生的费用均需线上支付；开具药品支付成功后将在24小时内由第三方快递配送，快递费到付，药品一经售出不予退换。
                           </p>`;

      } else if (e == 5) {
        this.ruleTit1 =
          "1. 就诊人为诊断明确且病情稳定的复诊患者，请如实反馈真实病情，否则一切后果由就诊人承担；";
        this.ruleTit2 =
          "2.请在病情描述界面上传您的既往病历、处方笺、检验、检查结果等相关资料；";
        this.ruleTit3 =
          "3.复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；";
        this.ruleTit4 = "4.挂号时间为24小时制；";
        this.ruleTit5 = "5.医生将在24小时内接诊并回复,自医生接诊开始计时。交流时限为24小时,超时系统将自动结束对话。如医生未在24小时内接诊,挂号费自动原路退还。";
        this.ruleText = `<p style="font-size:30rpx;color:#666666;font-weight:400;">${this.ruleTit1}</p>
                           <p style="font-size:30rpx;color:#FB4141;font-weight:400;margin-top:20px;">${this.ruleTit2}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit3}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">${this.ruleTit4}</p>
                           <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">
                           ${this.ruleTit5}
                           </p>`
      }
      // this.$api
      //   .appointmentBookingRules({ rules_type: e }, { showLoading: true })
      //   .then((res) => {
      //     console.log(res.data[0].rule_text.split("\n"), "规则");
      //     this.ruleText = res.data[0].rule_text;
      //     // this.ruleText = `<p style="font-size:30rpx;color:#666666;font-weight:400;">1. 就诊对象为诊断明确且病情稳定的复诊患者；</p>
      //     //                  <p style="font-size:30rpx;color:#FB4141;font-weight:400;margin-top:20px;">2. 请在病情描述界面上传您的既往病历、处方笺、检验、检查结果等相关资料；</p>
      //     //                  <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">3. 复诊时间超过三个月的患者、首诊患者、急症、危重症患者，请到线下医院就诊；</p>
      //     //                  <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">4. 挂号时间为：每日6:00-22:00；</p>
      //     //                  <p style="font-size:30rpx;color:#666666;font-weight:400;margin-top:20px;">5. 医生将在24小时内接诊并回复，自医生接诊开始计时，交流时限为24小时，超时系统将自动结束对话。</p>`;
      //     let list = [];
      //     res.data[0].rule_text.split("\n").forEach((item, index) => {
      //       if (item.indexOf("；") != -1 || item.indexOf("。") != -1) {
      //         list.push(item);
      //       }
      //     });
      //     // console.log(list)
      //     this.ruleTitList = list;
      //     // var myString = myString.replace(/(\r\n|\n|\r)/gm, "<br />");
      //   });
      // this.ruleTitList =
    },
    ruleHidBox() {
      this.ruleShow = false;
    },
    ruleShowBox() {
      this.ruleShow = true;
    },
    openModal(e) {
      console.log(e);
      this.doctorInfo = e;
      // this.showModal = true;
      // console.log(this.doctorInfo, 'this.doctorInfo')
      this.toDetails(4);
    },
    closeModal() {
      this.showModal = false;
      // this.hx_index = 0
    },
    toDetails(e) {
      // this.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(e)}&key=${this.interrogationKey}`)
      // this.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(this.doctorInfo)}&key=${e}`)
      let j = "";
      this.schedulingList.forEach((item, index) => {
        if (item.className == "active") {
          j = index;
        }
      });
      console.log(this.schedulingList[j].data)
      this.$router.push(
        `/pages/subPage/register/doctorInfo/main?doctorInfo=${JSON.stringify(
          this.doctorInfo
        )}&key=${this.schedulingList[j].data}`
      );
    },
    dateClick(e, j) {
      console.log(e);
      this.getDoctor(e, j);
    },
    deteTime(n) {
      let time = [];
      for (var i = 0; i <= 6; i++) {
        var weekDayArr = [
          "周日",
          "周一",
          "周二",
          "周三",
          "周四",
          "周五",
          "周六",
        ]; //星期映射数组
        var myDate = new Date();
        var milliseconds = myDate.getTime() + 1000 * 60 * 60 * 24 * i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
        var newMyDate = new Date(milliseconds);
        var weekDay = newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var year = newMyDate.getFullYear(); //获取当前年
        var month = newMyDate.getMonth() + 1; //获取当前月
        if (month < 10) {
          month = "0" + month;
        }
        var day = newMyDate.getDate(); //获取当前日
        if (day < 10) {
          day = "0" + day;
        }
        // console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
        time.push({
          value: month + "-" + day,
          label: weekDayArr[weekDay],
          data: year + '' + month + '' + day,
        });
      }
      return time;
    },
    getDoctorTo(j) {
      let params = {
          begin_arrange_day: j.arrange_day,
          end_arrange_day: j.arrange_day,
          // begin_arrange_day: '20200715',
          // end_arrange_day: '20200715',
      };
      this.$api.getDoctorList(params, { showLoading: true }).then((res) => {
        this.doctorMsgList = res.data;
        this.doctorMsgList.forEach(item => {
          if (item.doctor_id == j.doctor_id) {
            this.doctorInfo = item
          }
        })
        console.log(this.doctorInfo)
        console.log(this.doctorMsgList)
        this.$router.push(
            `/pages/subPage/register/doctorInfo/main?doctorInfo=${JSON.stringify(
              this.doctorInfo
            )}&key=${j.arrange_day}`
          );
        // if (res.msg == 0) {
        //   this.nullUrl = this.imgUrl + "empty_view_no_arrange.png";
        // } else {
        //   this.nullUrl = this.imgUrl + "noExpert.png";
        // }
      });
    },
    querySpecArrange () {
      this.delayShowData = true
      let doctor_id = this.$route.query.doctor_id
        // 判断一周内是否有医生排班
      this.$api.haveArrangeByWeek({doctor_id:doctor_id},{ showLoading: false }).then(res=>{
        console.log(res.data, '排班日期')
        // 这周有排班 但不是当前医生
        if ( false && !res.data.current_doctor) {  // 可定位到最近一天有排版的列表暂时关闭功能
          let param = {
            begin_arrange_day: res.data.arrange_day,
            end_arrange_day: res.data.arrange_day
          }
          this.$api.getDoctorList(param, { showLoading: true }).then((res) => {
            this.doctorMsgList = res.data;
            if (res.msg == 0) {
              this.nullUrl = this.imgUrl + "empty_view_no_arrange.png";
            } else {
              this.nullUrl = this.imgUrl + "noExpert.png";
            }
          });
          this.schedulingList.forEach((ele,index)=>{  // 日期高亮
            if (ele.data === res.data.arrange_day) {
              this.schedulingList[index].className = 'active'
            }
          })
          this.queryDoctorId = null
          return
        }
        // 本周没有所有医生都没有排班 定位到最近的一天
        let pa = {
          begin_arrange_day:this.schedulingList[0].data,
          end_arrange_day: this.schedulingList[0].data
        }
        this.schedulingList[0].className = 'active'
        this.$api.getDoctorList(pa, { showLoading: true }).then((res) => {
          this.doctorMsgList = res.data;
          if (res.msg == 0) {
            this.nullUrl = this.imgUrl + "empty_view_no_arrange.png";
          } else {
            this.nullUrl = this.imgUrl + "noExpert.png";
          }
          // this.delayShowData = false
        })
      })
      this.queryDoctorId = null
    },
    getDoctor(e, j) {
      // this.schedulingList[0].className = 'active'
      // 获取最近7天
      // console.log(1)
      this.delayShowData = true
      let params = {};
      this.schedulingList = this.deteTime();
      this.schedulingList.forEach((item) => {
        item.className = "";
      });
      console.log(e);
      console.log(this.schedulingList);

      // 预约记录跳转过来 带doctor_id 用来定位日期
      if (this.queryDoctorId!==null) {
        this.querySpecArrange ()
        return
      }

      if (!e) {
        this.schedulingList[0].className = "active";
        // this.getMultistageDeptList(this.navDeptList[0].dept_id, this.pageType)
        params = {
          begin_arrange_day: this.schedulingList[0].data,
          end_arrange_day: this.schedulingList[0].data,
        };
      } else {
        this.schedulingList[e].className = "active";
        params = {
          begin_arrange_day: j,
          end_arrange_day: j,
        };
      }
      this.$api.getDoctorList(params, { showLoading: true }).then((res) => {
        this.doctorMsgList = res.data;
        if (res.msg == 0) {
          this.nullUrl = this.imgUrl + "empty_view_no_arrange.png";
        } else {
          this.nullUrl = this.imgUrl + "noExpert.png";
        }
        this.delayShowData = false
      });
    },
    tooDeptDoctor(e) {
      if (e == 2) {
        this.getList(0);
        this.ruleName = "视频问诊知情同意书";
        this.ruleNameTitle = "视频问诊知情同意书";
        this.getRules(1);
        this.showDoctor = false;
      } else {
        this.showDoctor = true;
        this.ruleName = "视频问诊知情同意书";
        this.ruleNameTitle = "视频问诊知情同意书";
        this.getRules(0);
        this.getDoctor();
      }
    },
    serchList() {
      this.serchVale = this.serchVale.replace(/\s/g, "");
      if (this.serchVale == '' || !this.serchVale) {
        this.doctorList = []
      }
      if (this.serchVale && this.pageType == 1 && this.serchVale!= '' && this.serchVale!='null' && this.serchVale!='undefined' && this.serchVale!=null && this.serchVale!=undefined) {
        this.$api
          .searchDoctor({ keys: this.serchVale }, { showLoading: true })
          .then((res) => {
            this.doctorList = res.data;
          });
      } else if (this.serchVale && this.pageType == 0 && this.serchVale!= '' && this.serchVale!='null' && this.serchVale!='undefined' && this.serchVale!=null && this.serchVale!=undefined) {
        this.$api
          .doctorConsultDoctorQuery({ keys: this.serchVale }, { showLoading: true })
          .then((res) => {
            this.doctorList = res.data;
          });
      }
      console.log(this.serchVale, 'this.serchVale')
      console.log(this.pageType, 'this.pageType')
      console.log(this.online_visits, 'this.online_visits')
      console.log(this.doctorList.length, 'this.doctorList.length')
      // pageType == 0 && online_visits == 1 && doctorList.length == 0
    },
    removeIptVla() {
      this.serchVale = "";
      this.doctorList = []
    },
    deptClick(e, deptId) {
      this.setLeftBoxActive(e);
      this.getMultistageDeptList(deptId, this.pageType);
    },
    setLeftBoxActive(e) {
      this.navDeptList.forEach((item) => {
        item.className = "";
      });
      if (!e) {
        this.navDeptList[0].className = "active";
        this.getMultistageDeptList(this.navDeptList[0].dept_id, this.pageType);
      } else {
        this.navDeptList[e].className = "active";
      }
    },
    getDeptLink(e) {
      this.$api
        .getDeptLink({ second_dept_id: e }, { showLoading: true })
        .then((res) => {
          console.log(res.data, "眼科信息");
          if (res.data.length > 0) {
            this.deptList.unshift(res.data[0]);
            console.log(this.deptList);
          }
          // this.deptList = res.data
          // this.deptList = res.data.concat(this.deptList)
        });
    },
    getMultistageDeptList(e, j) {
      if (j == 0) {
        j = 1;
      } else if (j == 1) {
        j = 2;
      }
      this.$api
        .multistageDeptList(
          { dept_id: e, diagnose_type: j },
          { showLoading: true }
        )
        .then((res) => {
          this.deptList = res.data;
          // this.getDeptLink(e)
        });
    },
    getList(e) {
      let data = {
        diagnose_type: "0",
      };
      if (this.pageType == 0) {
        data.diagnose_type = 0;
      } else {
        data.diagnose_type = 1;
      }
      this.navDeptList = []
      this.$api.deptList(data, { showLoading: true }).then((res) => {
        this.navDeptList = res.data;
        this.setLeftBoxActive(e)
      });
    },
    close() {
      if (this.btnName == "我知道了") {
        this.modalStyle = "none";
      }
      // this.$router.push(`/pages/subPage/register/fillInMsg/main`)
    },
    toDoctorPage(e, doctor_id, item) {
      // 登入校验
      var token = this.$storage.getToken();
      if(!token) {
        this.$utils.showToast("text", "请先登录");
        setTimeout(() => {
          this.$router.push("/pages/center/child/login/main");
        }, 300);
        return
      }
      if (this.pageType == 0) {
        if (!doctor_id) {
          this.$router.push(`/pages/subPage/register/deptDetails/main?id=${e}`);
        } else {
          this.getDoctorTo(item)
        }
      } else {
        this.$router.push(
          `/pages/subPage/register/doctor/main?id=${e}&doctor_id=${doctor_id}`
        );
      }
    },
    countDown() {
      this.applyStatus = false;
      var interval = setInterval(() => {
        if (this.btnTime * 1 > 1) {
          this.btnTime--;
        } else {
          clearInterval(interval);
          this.btnTime = "";
          this.btnName = "我知道了";
          this.applyStatus = true;
          this.modalFooter = "modalFooter";
        }
      }, 1000);
    },
    goBack () {
      this.$router.go(-1)
    }
  },
  onShow(e) {
    this.showModal = false;
    // this.doctorList = []
    // this.navDeptList = []
    // this.deptList =  []
  },
  watch: {
    sessionsList: function (oldValue, newValue) {
      // this.dealData()
    },
  },
};
</script>

<style scoped lang="less">
.navTop {
  height: 90rpx;
  width: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  ul {
    position: relative;
    height: 100%;
    list-style: none;
    width: 100%;
    font-size: 30rpx;
    color: #666666;
    display: flex;
    li {
      font-size: 36rpx;
      flex: 1;
      text-align: center;
      line-height: 90rpx;
      // font-weight: bold;
    }
    .nowTab {
      color: #4B7AEA;
    }
  }
  .slideSpan {
    position: absolute;
    height: 5rpx;
    width: 135rpx;
    background-color: #4B7AEA;
    bottom: 0;
    left: 16.5%;
    transition: left ease 0.3s;
  }
  .chooseTabSpan {
    left: 66.5%;
  }
}
.outlineBox {
  flex: 1;
  overflow: hidden;
  height: 100%;
  flex-direction: column;
  display: flex;
}
.searchBox {
  width: 100%;
  // display:flex;
  // flex-direction: row;
  // height: 1100rpx;
  height: 100%;
  // height: 1175rpx;
  background: #ffffff;
  position: relative;
  //  height:600px;/去掉高度，只能垂直居中。
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  ul {
    width: 100%;
    height: 100%;
  }
  .searchDefault {
    // width:564rpx;
    width: 100%;
    // height: 455rpx;
    // height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .searchDefaultBox {
      width: 564rpx;
      height: 455rpx;
      position: relative;
      margin-top: 30%;
      img {
        width: 100%;
        height: 100%;
      }
      div {
        width: 100%;
        font-size: 31rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
        text-align: center;
        position: absolute;
        top: 50%;
      }
    }
  }
  ul {
    // width: 100%;
  }
  .serchItem {
    height: 93rpx;
    width: 100%;
    line-height: 93rpx;
    padding: 0 35rpx;
    display: inline-block;
    position: relative;
    border-bottom: 1rpx solid #dddddd;
    img {
      width: 31rpx;
      height: 31rpx;
      // position: absolute;
      margin-right: 15rpx;
      // vertical-align: middle;
      vertical-align: -2%;
    }
    span{
      font-size:32rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .rightImg{
      width: 63rpx;
      height: 32rpx;
      margin-left: 15rpx;
      vertical-align: -5%;
    }
  }
}
.bomBox {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  // align-items: center;
  // text-align: center;
  // height: 1100rpx;
  .rowBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    ul {
      //  overflow-y: auto;
      // overflow-x: hidden;
      display: flex;
      flex-direction: row;
      li {
        // width: 100%;
        flex: 1;
        // height: 98rpx;
        display: inline-block;
        border-bottom: 1rpx solid #dddddd;
        border-right: 1rpx solid #dddddd;
        border-top: 1rpx solid #dddddd;
        // width:71rpx;
        height: 66rpx;
        padding: 16rpx;
        color: rgba(51, 51, 51, 1);
        div {
          text-align: center;
          font-size: 24rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight: 400;
        }
      }
    }
    .active {
      font-size: 24rpx;
      font-weight: 400;
      background: rgba(83, 119, 243, 1);
      div {
        color: rgba(255, 255, 255, 1);
      }
    }
    .box {
      height: 1206rpx;
      overflow-y: auto;
      overflow-x: hidden;
      .liClass {
        height: 297rpx;
        background: #ffffff;
        border-bottom: 1rpx solid rgba(233, 233, 233, 1);
        padding: 17rpx 0;
        padding-bottom: 7rpx;
        .doctorImg {
          width: 130rpx;
          height: 130rpx;
          // margin-right: 20rpx;
          // opacity:0.03;
          // border: 1rpx solid red;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          // display: inline-block;
        }
        .topBox {
          height: 177rpx;
          // width: 100%;
          display: flex;
          flex-direction: row;
          display: flex;
          // display: inline-block;
        }
        .doctorMsg {
          flex: 1;
          height: 100%;
          // border-bottom: 1rpx solid #E9E9E9;
          margin-left: 20rpx;
        }
        .docName {
          display: inline-block;
          width: 36%;
          text-align: left;
          font-size: 38rpx;
          font-weight: 600;
          color: rgba(74, 113, 232, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .docPosition {
          display: inline-block;
          width: 64%;
          text-align: right;
          font-size: 30rpx;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .docIntroduce {
          margin: 20rpx 0;
          height: 88rpx;
          width: 100%;
          font-size: 30rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          // line-height: 88rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
        .docBom {
          padding: 8rpx 0;
          position: relative;
          left: -150rpx;
          margin-left: 20rpx;
          .labClass {
            font-size: 30rpx;
            // font-family:PingFangSC-Regular,PingFang SC;
            font-weight: 600;
            color: rgba(16, 212, 177, 1);
            margin-right: 51rpx;
          }
          img {
            display: inline-block;
            width: 103rpx;
            height: 103rpx;
            margin-right: 5rpx;
            vertical-align: bottom;
          }
          div {
            display: inline-block;
          }
          .btnClass {
            width: 180rpx;
            height: 70rpx;
            background: rgba(255, 255, 255, 1);
            border-radius: 2rpx;
            border: 1px solid rgba(160, 183, 237, 1);
            font-size: 36rpx;
            font-weight: 400;
            color: rgba(75, 122, 234, 1);
            line-height: 70rpx;
            text-align: center;
          }
          .itemTxt {
            // margin:10rpx 0;
            height: 103rpx;
          }
          .btnLeft {
            width: 42%;
            margin-right: 16%;
          }
          .btnRight {
            width: 42%;
          }
          p {
            font-size: 26rpx;
            font-weight: 400;
          }
          .topP {
            margin-top: 12rpx;
            margin-bottom: 6rpx;
            color: rgba(51, 51, 51, 1);
          }
          .bomP {
            color: #666666;
          }
        }
      }
    }
  }
  .rowBox > ul > li:last-child {
    border-right: 0rpx solid #dddddd;
  }
  // height: 1100rpx;
  .leftBox {
    width: 177rpx;
    // height: 100%;
    border: 1rpx solid #dddddd;
    display: flex;
    flex-direction: column;

    box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(0, 0, 0, 0.14);
    border-bottom: 0px solid #dddddd;
    ul {
      overflow-y: auto;
      overflow-x: hidden;
      background: rgba(249, 249, 249, 1);
      // height:850rpx;
      li {
        width: 100%;
        // height: 98rpx;
        border-bottom: 1rpx solid #dddddd;
        height: 175rpx;
      }
    }
    .deptImg {
      margin: 0 auto;
      padding-top: 32rpx;
      margin-bottom: 10rpx;
      // padding-left:65rpx;
      // padding-right: 58rpx;
      width: 70rpx;
      height: 70rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .deptName {
      text-align: center;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(83, 119, 243, 1);
      margin-bottom: 19rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .active {
      font-size: 30rpx;
      font-weight: 400;
      background: rgba(83, 119, 243, 1);
      img {
        filter: brightness(3);
      }
      div {
        color: #ffffff;
      }
    }
    // .active0{
    //   font-size:30rpx;
    //   font-weight:400;
    //   background:rgba(83,119,243,1);
    //   img{
    //     filter: brightness(100);
    //   }
    //   div{
    //     color: #FFFFFF;
    //   }
    // }
  }
  .rightBox {
    width: 573rpx;
    // border: 1rpx solid red;
    display: flex;
    flex-direction: row;
    border-top: 1rpx solid #dddddd;
    vertical-align: middle;
    ul {
      // display: flex;
      // flex-direction: row;
      overflow-y: auto;
      overflow-x: hidden;
      li {
        display: inline-block;
        // overflow: hidden;
        // width:104rpx;
        // height:96rpx;
        // line-height: 96rpx;
        text-align: center;
        font-size: 33rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        background: rgba(255, 255, 255, 1);
        border-radius: 12rpx;
        border: 1rpx solid rgba(219, 219, 219, 1);
        margin: 29rpx 0rpx 0rpx 27rpx;
        // padding: 30rpx 26rpx;
        vertical-align: middle;
        div {
          height: 156rpx;
          width: 135rpx;
          // vertical-align: middle;
          // display: table-cell;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
          // overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 10rpx;
        }
      }
    }
  }
}
.whiteBg {
  background-color: #fff;
}
.topBox {
  padding: 15rpx 20rpx;
}
.interrogationBox {
  position: relative;
  width: 100%;
  margin-top: 18rpx;
  margin-bottom: 8rpx;
  display: flex;
  justify-content: space-between;
  .itemLeft {
    height: 185rpx;
    width: 355rpx;
    // border: 1rpx solid red;
  }
  .itemRight {
    height: 185rpx;
    width: 355rpx;
    // border: 1rpx solid black;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.magnifierBox {
  // padding:30rpx 50rpx;
  position: relative;
  width: 100%;
  height: 70rpx;
  color: #aaaaaa;
  font-size: 28rpx;
  margin: 15rpx 0;
  .iptBox {
    height: 100%;
    background-color: #f6f6f6;
    border-radius: 35rpx;
    .ipt {
      // width:80%;
      height: 100%;
      width: 72%;
      background: rgba(246, 246, 246, 1);
      border-radius: 35rpx;
      // margin: 15rpx 20rpx;
      padding-left: 90rpx;
      margin-right: 24rpx;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .btnCancel {
    display: inline-block;
    // height: 35rpx;
    // line-height: 35rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(74, 113, 232, 1);
    vertical-align: middle;
  }
  img {
    position: absolute;
    width: 31rpx;
    height: 32rpx;
    left: 35rpx;
    top: 20rpx;
  }
  .cancelBox{
    width: 75rpx;
    height: 100%;
    position: absolute;
    // border: 1px solid black;
    right: 0rpx;
    top: 0rpx;
    z-index: 9999;
    .imgClass{
      width: 37rpx;
      height: 37rpx;
      position: absolute;
      left: 18rpx;
      top: 18rpx;
    }
  }
}

.subPage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.modalCls {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 100%;
    // height: 663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0rpx;
      // right: -30rpx;
      // top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 95%;
          font-size: 28rpx;
          // font-family:PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .itemSpanRed {
          color: #ff5453;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          display: inline;
          // color:rgba(102,102,102,1);
        }
        // .itemSpanRad{
        //   color: #FF5453;
        // }
      }
    }
    .modalFooter {
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    position: relative;
    // width: 670rpx;
    height: 920rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    margin: 0 65rpx;
    .dialog_close {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: -30rpx;
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 27rpx 35rpx 13rpx 35rpx;
      display: flex;
      flex-direction: column;
      height: 55%;
      overflow-y: scroll;
      &::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid rgba(0, 0, 0, 0);
      }
      &::-webkit-scrollbar {
        width: 8rpx;
        height: 13rpx;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #bbbbbb;
        background-clip: padding-box;
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
        min-height: 28px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 5rpx;
        -moz-border-radius: 5rpx;
        border-radius: 5rpx;
      }
      .dataBox {
        margin-bottom: 20rpx;
        span {
          display: inline-block;
          font-size: 30rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 100%;
        }
        .itemColor {
          color: #fb4141;
        }
        .itemSpan2 {
          font-weight: bold;
        }
      }
    }
    .btnBomBlue{
      display: flex;
      justify-content: space-between;
      padding: 32rpx 37rpx;
      .modalFooterBtn{
        // flex: 1;
        // line-height: 76rpx;
        text-align: center;
        font-size:36rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        // width: 257rpx;
        padding: 17rpx 0rpx;
        // margin-bottom: 40rpx;
        width: 257rpx;
        border-radius:4rpx;
      }
      .leftBtn{
        color: #4A71E8;
        background:rgba(255,255,255,1);
        border: 1rpx solid rgba(160,183,237,1);
      }
      .rightBtn{
        color:#FFFFFF;
        background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
      }
    }
    .modalFooter {
      position: relative;
      top: 40rpx;
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
.nullBox {
  height: 1000rpx;
  // background: #FFFFFF;
  position: relative;
  //  height:600px;/去掉高度，只能垂直居中。
  display: flex;
  justify-content: center;
  align-items: center;
  .searchDefault {
    width: 720rpx;
    height: 493rpx;
    position: relative;
    line-height: 493rpx;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.ruleBox {
  height: 100rpx;
  font-size: 34rpx;
  // font-family:PingFangSC-Medium,PingFang SC;
  font-weight: 500;
  color: rgba(74, 113, 232, 1);
  line-height: 100rpx;
  // position: absolute;
  // bottom: 0;
  text-align: center;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -1px 9px 0px rgba(0, 0, 0, 0.15);
  img {
    width: 25rpx;
    height: 27rpx;
  }
}
.ruleModal {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 100%;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    max-height: 825rpx;
    min-height: 618rpx;
    // padding-bottom: 22%;
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0rpx;
      // right: -30rpx;
      // top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalTit {
      width: 100%;
      height: 90rpx;
      background: rgba(95, 130, 255, 1);
      height: 90rpx;
      font-size: 34rpx;
      border-radius: 24rpx;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      // font-family:PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 90rpx;
      img {
        // width: 100%;
        // height: 220rpx;
        width: 25rpx;
        height: 27rpx;
      }
    }
    .modalCenter {
      padding: 32rpx 30rpx 33rpx 37rpx;
      // padding-bottom: 120rpx;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      height: 828rpx;
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          // width:95%;
          // font-size:28rpx;
          // font-family:PingFangSC-Medium,PingFang SC;
          // font-weight:500;
          // color:rgba(102,102,102,1);
          font-size: 30rpx;
          // font-family:PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .itemSpanRed {
          color: #ff5453;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          display: inline;
          // color:rgba(102,102,102,1);
        }
        // .itemSpanRad{
        //   color: #FF5453;
        // }
      }
      .itemSpan {
        padding-bottom: 120rpx;
        margin-bottom: 60rpx;
      }
    }
    .modalFooter {
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
</style>
